
import classNames from 'classnames';
import './animate.css'
import './style.less'

const Panel = (props) => {
  const { property, dataValue, item,  boderDebugger } = props;

  // 排位置，给每一个panel排位置
  const classes = classNames('grid-item', 'grid_padding', {
   [`grid-x-${property.attrs.col}`]: property.attrs.col,
   [`grid-y-${property.attrs.row}`]: property.attrs.row,
   [`grid-w-${property.attrs.width}`]: property.attrs.width,
   [`grid-h-${property.attrs.height}`]: property.attrs.height,
  })

  console.log('classes:', classes)

  return (
    <div
    className={classes}
    style={{zIndex: property.attrs.zIndex, border: '1px solid red'}}
    >
    <div className="sti-panel"
      style={property.panelStyle}
      className={{'boder-debugger': boderDebugger}}>

      <div className="sti-panel_inner" style={{height: 250}}>
        <div className="sti-panel_header sti-panel_header_show">
          <div className="sti-panel_header_title">
            <span>{property.title}</span>
          </div>
        </div>
        <div className="sti-panel_body">
          <property.component></property.component>
          {/* 循环组件 */}

          {/* <component :is="comp" :value="pValue" :dataValue="dataValue" :property="property"></component> */}

        </div>
      </div>
    </div>
  </div>
  )
}

export default Panel;

